import {
  Card,
  Row,
  Col,
  Statistic,
  List,
  Button,
  Space,
  Tag,
  Progress,
} from "antd"
import { useState, useEffect } from "react"
import {
  UserOutlined,
  FileTextOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  TeamOutlined,
  CalendarOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons"
import PageHeaderWrapper from "@/components/pageHeaderWrapper"
import "./index.less"

function Dashboard() {
  const [loading, setLoading] = useState(false)
  const [dashboardData, setDashboardData] = useState({
    statistics: {
      totalTasks: 0,
      completedTasks: 0,
      pendingReports: 0,
      teamMembers: 0,
    },
    todoList: [],
    recentReports: [],
  })

  // 获取首页数据
  const fetchDashboardData = async () => {
    setLoading(true)
    try {
      // 替换为实际API调用
      const response = await fetch("/api/dashboard")
      const data = await response.json()
      setDashboardData(data)
    } catch (error) {
      console.error("获取首页数据失败:", error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchDashboardData()
  }, [])

  // 快捷操作按钮
  const quickActions = [
    {
      title: "写日报",
      icon: <FileTextOutlined />,
      path: "/daily-report",
    },
    {
      title: "发起协同",
      icon: <TeamOutlined />,
      path: "/synergy/create",
    },
    {
      title: "查看审批",
      icon: <CheckCircleOutlined />,
      path: "/approval",
    },
  ]

  return (
    <>
      <PageHeaderWrapper title="工作台" subtitle="欢迎回来" />
      <section className="G-main">
        {/* 数据概览 */}
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card>
              <Statistic
                title="待办任务"
                value={dashboardData.statistics.totalTasks}
                prefix={<ClockCircleOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="已完成任务"
                value={dashboardData.statistics.completedTasks}
                prefix={<CheckCircleOutlined />}
                valueStyle={{ color: "#3f8600" }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="待审批日报"
                value={dashboardData.statistics.pendingReports}
                prefix={<FileTextOutlined />}
                valueStyle={{ color: "#cf1322" }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="团队成员"
                value={dashboardData.statistics.teamMembers}
                prefix={<TeamOutlined />}
              />
            </Card>
          </Col>
        </Row>

        {/* 待办事项和快捷入口 */}
        <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
          <Col span={16}>
            <Card title="待办事项" loading={loading}>
              <List
                dataSource={dashboardData.todoList}
                renderItem={(item) => (
                  <List.Item>
                    <List.Item.Meta
                      title={
                        <Space>
                          <span>{item.title}</span>
                          <Tag
                            color={item.priority === "high" ? "red" : "blue"}
                          >
                            {item.type}
                          </Tag>
                        </Space>
                      }
                      description={
                        <Space direction="vertical" size={2}>
                          <Space>
                            <CalendarOutlined /> 截止日期：{item.deadline}
                          </Space>
                          <Progress percent={item.progress} size="small" />
                        </Space>
                      }
                    />
                  </List.Item>
                )}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card title="快捷入口">
              <Space direction="vertical" style={{ width: "100%" }}>
                {quickActions.map((action) => (
                  <Button
                    key={action.title}
                    type="text"
                    icon={action.icon}
                    block
                    onClick={() => (window.location.href = action.path)}
                  >
                    {action.title}
                  </Button>
                ))}
              </Space>
            </Card>
          </Col>
        </Row>

        {/* 最近日报 */}
        <Row style={{ marginTop: 16 }}>
          <Col span={24}>
            <Card title="最近日报" loading={loading}>
              <List
                dataSource={dashboardData.recentReports}
                renderItem={(report) => (
                  <List.Item>
                    <List.Item.Meta
                      title={
                        <Space>
                          <span>{report.title}</span>
                          <Tag
                            color={
                              report.status === "approved" ? "green" : "orange"
                            }
                          >
                            {report.status === "approved" ? "已审批" : "待审批"}
                          </Tag>
                        </Space>
                      }
                      description={
                        <Space>
                          <UserOutlined /> {report.author}
                          <span>|</span>
                          <CalendarOutlined /> {report.date}
                        </Space>
                      }
                    />
                  </List.Item>
                )}
              />
            </Card>
          </Col>
        </Row>
      </section>
    </>
  )
}

export default Dashboard
